<script lang="ts">
  import type { Snippet } from 'svelte';
  import { Button } from '@/lib/components/ui/button/index.js';

  interface Props {
    children?: Snippet;
  }

  let { children }: Props = $props();
  let count = $state(0);

  function add() {
    count += 1;
  }

  function subtract() {
    count -= 1;
  }
</script>

<div class="flex items-center justify-center min-h-screen p-4">
  <div
    class="flex flex-col items-center space-y-6 p-8 bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl shadow-lg"
  >
    <div class="flex items-center space-x-6">
      <Button
        variant="outline"
        size="icon"
        class="rounded-full shadow-md hover:shadow-lg transition-all duration-200 hover:scale-105"
        onclick={subtract}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
      </Button>

      <div class="min-w-[100px] text-center">
        <div
          class="text-4xl font-bold text-gray-800 bg-white px-6 py-3 rounded-lg shadow-inner"
        >
          {count}
        </div>
      </div>

      <Button
        variant="outline"
        size="icon"
        class="rounded-full shadow-md hover:shadow-lg transition-all duration-200 hover:scale-105"
        onclick={add}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <line x1="12" y1="5" x2="12" y2="19"></line>
          <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
      </Button>
    </div>

    <div class="bg-white/80 backdrop-blur-sm px-4 py-2 rounded-lg shadow-sm">
      {@render children?.()}
    </div>
  </div>
</div>
